<template>
  <div v-if="loading" v-loading="loading ? {text, img: Spin, target, rotate: false } : false" :style="_style" >
    <slot />
  </div>
</template>

<script lang="ts" setup>
import { generateCssVars } from '@vc/utils';
import type { CSSProperties } from 'vue';
import Spin from '@/assets/loading.gif';

interface Props {
  loading: boolean;
  text?: string
  style?: CSSProperties
  /** 目标节点 */
  target?: string
  rotate?: string
}

const {
  loading,
  text = '加载中...',
  target = '.layout-container'
} = defineProps<Props>();

const _style = computed(() => {
  return generateCssVars({
    'rotate-animation': 'none'
  }, 'loading');
});
</script>
